Test Setup Failed
Pull Request — master (#1653)
by Aristeides
05:27
created

wp.customize.Control.extend.getValue   B

Complexity

Conditions 5
Paths 2

Size

Total Lines 12

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
cc 5
nc 2
nop 0
dl 0
loc 12
rs 8.8571
c 0
b 0
f 0
1
/* global kirkiControlLoader */
2
wp.customize.controlConstructor['kirki-image'] = wp.customize.Control.extend({
3
4
	// When we're finished loading continue processing
5
	ready: function() {
6
7
		'use strict';
8
9
		var control = this;
0 ignored issues
show
Coding Style introduced by
As per coding-style, prefer block-scoped variables using let or const which have better semantics than var.

Since ECMAScript 6, you can create block-scoped vars or constants with the keywords let or const. These variables/constants are only valid in the code block where they have been declared.

Consider the following two pieces of code:

if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console

and

if (true)
 {
    let x = "Hello, Stonehenge!";
}

console.log(x); //ReferenceError: x is not defined

The variable is not defined otuside of its block. This limits bleeding of variables into other contexts.

To know more about this ECMA6 feature, look at the MDN pages on let and const.

Loading history...
10
11
		// Init the control.
12
		if ( ! _.isUndefined( window.kirkiControlLoader ) && _.isFunction( kirkiControlLoader ) ) {
13
			kirkiControlLoader( control );
14
		} else {
15
			control.initKirkiControl();
16
		}
17
	},
18
19
	initKirkiControl: function() {
20
21
		var control       = this,
0 ignored issues
show
Coding Style introduced by
As per coding-style, prefer block-scoped variables using let or const which have better semantics than var.

Since ECMAScript 6, you can create block-scoped vars or constants with the keywords let or const. These variables/constants are only valid in the code block where they have been declared.

Consider the following two pieces of code:

if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console

and

if (true)
 {
    let x = "Hello, Stonehenge!";
}

console.log(x); //ReferenceError: x is not defined

The variable is not defined otuside of its block. This limits bleeding of variables into other contexts.

To know more about this ECMA6 feature, look at the MDN pages on let and const.

Loading history...
22
		    value         = control.getValue(),
23
		    saveAs        = ( ! _.isUndefined( control.params.choices ) && ! _.isUndefined( control.params.choices.save_as ) ) ? control.params.choices.save_as : 'url',
24
		    preview       = control.container.find( '.placeholder, .thumbnail' ),
25
		    previewImage  = ( 'array' === saveAs ) ? value.url : value,
26
		    removeButton  = control.container.find( '.image-upload-remove-button' ),
27
		    defaultButton = control.container.find( '.image-default-button' );
28
29
		control.container.find( '.kirki-controls-loading-spinner' ).hide();
30
31
		// Tweaks for save_as = id.
32
		if ( ( 'id' === saveAs || 'ID' === saveAs ) && '' !== value ) {
33
			wp.media.attachment( value ).fetch().then( function() {
34
				setTimeout( function() {
35
					var url = wp.media.attachment( value ).get( 'url' );
0 ignored issues
show
Coding Style introduced by
As per coding-style, prefer block-scoped variables using let or const which have better semantics than var.

Since ECMAScript 6, you can create block-scoped vars or constants with the keywords let or const. These variables/constants are only valid in the code block where they have been declared.

Consider the following two pieces of code:

if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console

and

if (true)
 {
    let x = "Hello, Stonehenge!";
}

console.log(x); //ReferenceError: x is not defined

The variable is not defined otuside of its block. This limits bleeding of variables into other contexts.

To know more about this ECMA6 feature, look at the MDN pages on let and const.

Loading history...
36
					preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + url + '" alt="" />' );
37
				}, 700 );
38
			} );
39
		}
40
41
		// If value is not empty, hide the "default" button.
42
		if ( ( 'url' === saveAs && '' !== value ) || ( 'array' === saveAs && ! _.isUndefined( value.url ) && '' !== value.url ) ) {
43
			control.container.find( 'image-default-button' ).hide();
44
		}
45
46
		// If value is empty, hide the "remove" button.
47
		if ( ( 'url' === saveAs && '' === value ) || ( 'array' === saveAs && ( _.isUndefined( value.url ) || '' === value.url ) ) ) {
48
			removeButton.hide();
49
		}
50
51
		// If value is default, hide the default button.
52
		if ( value === control.params['default'] ) {
53
			control.container.find( 'image-default-button' ).hide();
54
		}
55
56
		if ( '' !== previewImage ) {
57
			preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + previewImage + '" alt="" />' );
58
		}
59
60
		control.container.on( 'click', '.image-upload-button', function( e ) {
61
			var image = wp.media({ multiple: false }).open().on( 'select', function() {
0 ignored issues
show
Coding Style introduced by
As per coding-style, prefer block-scoped variables using let or const which have better semantics than var.

Since ECMAScript 6, you can create block-scoped vars or constants with the keywords let or const. These variables/constants are only valid in the code block where they have been declared.

Consider the following two pieces of code:

if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console

and

if (true)
 {
    let x = "Hello, Stonehenge!";
}

console.log(x); //ReferenceError: x is not defined

The variable is not defined otuside of its block. This limits bleeding of variables into other contexts.

To know more about this ECMA6 feature, look at the MDN pages on let and const.

Loading history...
62
63
					// This will return the selected image from the Media Uploader, the result is an object.
64
					var uploadedImage = image.state().get( 'selection' ).first(),
0 ignored issues
show
Coding Style introduced by
As per coding-style, prefer block-scoped variables using let or const which have better semantics than var.

Since ECMAScript 6, you can create block-scoped vars or constants with the keywords let or const. These variables/constants are only valid in the code block where they have been declared.

Consider the following two pieces of code:

if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console

and

if (true)
 {
    let x = "Hello, Stonehenge!";
}

console.log(x); //ReferenceError: x is not defined

The variable is not defined otuside of its block. This limits bleeding of variables into other contexts.

To know more about this ECMA6 feature, look at the MDN pages on let and const.

Loading history...
65
					    previewImage  = uploadedImage.toJSON().sizes.full.url;
66
67
					if ( ! _.isUndefined( uploadedImage.toJSON().sizes.medium ) ) {
68
						previewImage = uploadedImage.toJSON().sizes.medium.url;
69
					} else if ( ! _.isUndefined( uploadedImage.toJSON().sizes.thumbnail ) ) {
70
						previewImage = uploadedImage.toJSON().sizes.thumbnail.url;
71
					}
72
73
					if ( 'array' === saveAs ) {
74
						control.saveValue( 'id', uploadedImage.toJSON().id );
75
						control.saveValue( 'url', uploadedImage.toJSON().sizes.full.url );
76
						control.saveValue( 'width', uploadedImage.toJSON().width );
77
						control.saveValue( 'height', uploadedImage.toJSON().height );
78
					} else if ( 'id' === saveAs ) {
79
						control.saveValue( 'id', uploadedImage.toJSON().id );
80
					} else {
81
						control.saveValue( 'url', uploadedImage.toJSON().sizes.full.url );
82
					}
83
84
					if ( preview.length ) {
85
						preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + previewImage + '" alt="" />' );
86
					}
87
					if ( removeButton.length ) {
88
						removeButton.show();
89
						defaultButton.hide();
90
					}
91
			    });
92
93
			e.preventDefault();
94
		});
95
96
		control.container.on( 'click', '.image-upload-remove-button', function( e ) {
97
98
			var preview,
0 ignored issues
show
Coding Style introduced by
As per coding-style, prefer block-scoped variables using let or const which have better semantics than var.

Since ECMAScript 6, you can create block-scoped vars or constants with the keywords let or const. These variables/constants are only valid in the code block where they have been declared.

Consider the following two pieces of code:

if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console

and

if (true)
 {
    let x = "Hello, Stonehenge!";
}

console.log(x); //ReferenceError: x is not defined

The variable is not defined otuside of its block. This limits bleeding of variables into other contexts.

To know more about this ECMA6 feature, look at the MDN pages on let and const.

Loading history...
99
			    removeButton,
100
			    defaultButton;
101
102
			e.preventDefault();
103
104
			control.saveValue( 'id', '' );
105
			control.saveValue( 'url', '' );
106
			control.saveValue( 'width', '' );
107
			control.saveValue( 'height', '' );
108
109
			preview       = control.container.find( '.placeholder, .thumbnail' );
110
			removeButton  = control.container.find( '.image-upload-remove-button' );
111
			defaultButton = control.container.find( '.image-default-button' );
112
113
			if ( preview.length ) {
114
				preview.removeClass().addClass( 'placeholder' ).html( 'No file selected' );
115
			}
116
			if ( removeButton.length ) {
117
				removeButton.hide();
118
				if ( jQuery( defaultButton ).hasClass( 'button' ) ) {
119
					defaultButton.show();
120
				}
121
			}
122
		});
123
124
		control.container.on( 'click', '.image-default-button', function( e ) {
125
126
			var preview,
0 ignored issues
show
Coding Style introduced by
As per coding-style, prefer block-scoped variables using let or const which have better semantics than var.

Since ECMAScript 6, you can create block-scoped vars or constants with the keywords let or const. These variables/constants are only valid in the code block where they have been declared.

Consider the following two pieces of code:

if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console

and

if (true)
 {
    let x = "Hello, Stonehenge!";
}

console.log(x); //ReferenceError: x is not defined

The variable is not defined otuside of its block. This limits bleeding of variables into other contexts.

To know more about this ECMA6 feature, look at the MDN pages on let and const.

Loading history...
127
			    removeButton,
128
			    defaultButton;
129
130
			e.preventDefault();
131
132
			control.saveValue( 'url', control.params['default'] );
133
134
			preview       = control.container.find( '.placeholder, .thumbnail' );
135
			removeButton  = control.container.find( '.image-upload-remove-button' );
136
			defaultButton = control.container.find( '.image-default-button' );
137
138
			if ( preview.length ) {
139
				preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + control.params['default'] + '" alt="" />' );
140
			}
141
			if ( removeButton.length ) {
142
				removeButton.show();
143
				defaultButton.hide();
144
			}
145
		});
146
	},
147
148
	/**
149
	 * Gets the value.
150
	 */
151
	getValue: function() {
152
		var control = this,
0 ignored issues
show
Coding Style introduced by
As per coding-style, prefer block-scoped variables using let or const which have better semantics than var.

Since ECMAScript 6, you can create block-scoped vars or constants with the keywords let or const. These variables/constants are only valid in the code block where they have been declared.

Consider the following two pieces of code:

if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console

and

if (true)
 {
    let x = "Hello, Stonehenge!";
}

console.log(x); //ReferenceError: x is not defined

The variable is not defined otuside of its block. This limits bleeding of variables into other contexts.

To know more about this ECMA6 feature, look at the MDN pages on let and const.

Loading history...
153
		    value   = control.setting._value,
154
		    saveAs  = ( ! _.isUndefined( control.params.choices ) && ! _.isUndefined( control.params.choices.save_as ) ) ? control.params.choices.save_as : 'url';
155
156
		if ( 'array' === saveAs && _.isString( value ) ) {
157
			value = {
158
				url: value
159
			};
160
		}
161
		return value;
162
	},
163
164
	/**
165
	 * Saves the value.
166
	 */
167
	saveValue: function( property, value ) {
168
		var control   = this,
0 ignored issues
show
Coding Style introduced by
As per coding-style, prefer block-scoped variables using let or const which have better semantics than var.

Since ECMAScript 6, you can create block-scoped vars or constants with the keywords let or const. These variables/constants are only valid in the code block where they have been declared.

Consider the following two pieces of code:

if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console

and

if (true)
 {
    let x = "Hello, Stonehenge!";
}

console.log(x); //ReferenceError: x is not defined

The variable is not defined otuside of its block. This limits bleeding of variables into other contexts.

To know more about this ECMA6 feature, look at the MDN pages on let and const.

Loading history...
169
		    valueOld  = control.setting._value,
170
		    saveAs    = ( ! _.isUndefined( control.params.choices ) && ! _.isUndefined( control.params.choices.save_as ) ) ? control.params.choices.save_as : 'url';
171
172
		if ( 'array' === saveAs ) {
173
			if ( _.isString( valueOld ) ) {
174
				valueOld = {};
175
			}
176
			valueOld[ property ] = value;
177
			control.setting.set( valueOld );
178
			control.container.find( 'button' ).trigger( 'change' );
179
			return;
180
		}
181
		control.setting.set( value );
182
		control.container.find( 'button' ).trigger( 'change' );
183
	}
184
});
185